<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>前端</div>
    <div class="box1">今天立冬</div>
    <p>上课认真听</p>
    <div id="box">
        <p class="box1">好好学习，天天向上</p>
    </div>
</body>
    <script>
        // let:定义变量； const：定义常量；
        //选择器：标签选择器  id选择器  类选选择器
        //querySelector()获取第一个元素
         const elm1 = document.querySelector('p'); //标签选择
         console.log(elm1);
         elm1.style.color = 'pink';
         const eml2 = document.querySelector('#box');  //通过id选择
         console.log(eml2);
         const eml3 = document.querySelector('.box1'); //通过类名选择
         console.log(eml3);
         //获取所有的元素
         const eml4 = document.querySelectorAll('div');
         console.log(eml4);
         console.log('--------');
         //像遍历数组一样遍历eml4
         //通过遍历伪数组eml4能获取指定位置的元素
         for (let i = 0;i<eml4.length;i++){
            console.log(eml4[i]);
         }
         //eml4[1].innerHTML='这是修改的内容';
         eml4[1].style.color = 'green';

         //获取子元素
         const son = document.querySelector('#box p');
         console.log(son);
    </script>
</html>